<template>
    <view class="upgradeLaborUnion_outer">
        <view class="upgradeLaborUnion_header">
            <image src="@/static/upgradeLaborUnion/back.png"></image>
        </view>
        <view class="upgradeLaborUnion_title"><text>升级工会</text></view>
        <view class="upgradeLaborUnion_content">
            <view class="upgradeLaborUnion_content_top">
                <view>
                    <text>销毁一定的云豆即可成为大玩家，大玩家赠送或他人赠送云豆时，手续费比普通用户低。并赠送5个代理名额，享代理管理奖。</text>
                </view>
            </view>
            <view class="upgradeLaborUnion_content_center">
                <view class="upgradeLaborUnion_content_center_one">
                    <text class="title">当前等级：</text>
                    <text class="grade">无</text>
                    <text class="balance">(您有7698.987云豆)</text>
                </view>
                <view class="upgradeLaborUnion_content_center_two">
                    <image src="@/static/upgradeLaborUnion/alliance.png" />
                    <text class="grade">盟主</text>
                    <text class="condition">销毁200000云豆</text>
                </view>
                <view class="upgradeLaborUnion_content_center_three">
                    <view class="upgradeLaborUnion_content_center_three_input">
                        <u--input placeholder="请填写您的ID" border="none" customStyle="margin-left:42rpx"></u--input>
                    </view>
                </view>
            </view>
            <view class="upgradeLaborUnion_content_down">
                <view @click="isShowDestroyBeanPop = true">
                    <text>升级大玩家</text>
                </view>
            </view>
        </view>
        <u-popup :show="isShowDestroyBeanPop" @close="isShowDestroyBeanPop = false" round="45rpx" :closeable="true">
            <view class="condition_box">
                <view class="condition_box_top">
                    <image class="goldBean" src="@/static/upgradeLaborUnion/goldBean.png"
                        v-if="isShowDestroyBeanStatus == 0 || isShowDestroyBeanStatus == 2" />
                    <image class="allianceLeader" src="@/static/upgradeLaborUnion/allianceLeader.png"
                        v-if="isShowDestroyBeanStatus == 1" />
                </view>
                <view class="condition_box_center">
                    <text v-if="isShowDestroyBeanStatus == 0">您确认销毁200000云豆
                        升级成为盟主吗</text>
                    <text v-if="isShowDestroyBeanStatus == 1">恭喜您成功升级为盟主</text>
                    <text v-if="isShowDestroyBeanStatus == 2">抱歉</text>
                    <text class="errorHign" v-if="isShowDestroyBeanStatus == 2">您当前的云豆不足，还不能成为盟主哦</text>
                </view>
                <view class="condition_box_down">
                    <view>
                        <text v-if="isShowDestroyBeanStatus == 0">确认</text>
                        <text v-if="isShowDestroyBeanStatus == 1 || isShowDestroyBeanStatus == 2">我知道了</text>
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 是否展示提示弹框
            isShowDestroyBeanPop: true,
            // 弹框状态 0：待确认，1：成功，2：失败
            isShowDestroyBeanStatus: 0,
        }
    },
}
</script>

<style lang="scss" scoped>
.upgradeLaborUnion_outer {
    width: 100vw;
    min-height: 100vh;
    background: linear-gradient(180deg, #FF7A12 0%, #FFA345 100%);
    display: flex;
    flex-direction: column;

    .upgradeLaborUnion_header {
        image {
            width: 46rpx;
            height: 46rpx;
            margin-top: 74rpx;
            margin-left: 34rpx;
        }
    }

    .upgradeLaborUnion_title {
        margin-top: 60rpx;
        margin-left: 34rpx;

        text {
            font-size: 46rpx;
            font-family: DreamHanSansSC, DreamHanSansSC;
            font-weight: 600;
            color: #FFFFFF;
        }
    }

    .upgradeLaborUnion_content {
        flex: 1;
        margin-top: 26rpx;
        width: 100vw;
        background: #FFFAEF;
        border-radius: 45rpx 45rpx 0rpx 0rpx;
        border: 1rpx solid #FFFAEF;

        .upgradeLaborUnion_content_top {
            display: flex;
            justify-content: center;
            margin-top: 80rpx;

            view {
                width: 712rpx;
                height: 128rpx;
                background: rgb(255, 168, 77, 0.15);
                border-radius: 26rpx;
                display: flex;
                justify-content: center;
                align-items: center;

                text {
                    display: flex;
                    width: 662rpx;
                    height: 63rpx;
                    font-size: 23rpx;
                    font-family: DreamHanSansSC, DreamHanSansSC;
                    font-weight: normal;
                    color: #37322C;
                    line-height: 31rpx;
                }
            }
        }

        .upgradeLaborUnion_content_center {
            .upgradeLaborUnion_content_center_one {
                margin-top: 24rpx;

                .title {
                    font-size: 28rpx;
                    font-family: DreamHanSansSC, DreamHanSansSC;
                    font-weight: 600;
                    color: #5A564D;
                    line-height: 38rpx;
                    margin-left: 44rpx;
                }

                .grade {
                    font-size: 28rpx;
                    font-family: DreamHanSansSC, DreamHanSansSC;
                    font-weight: 600;
                    color: #FE8323;
                    line-height: 38rpx;
                }

                .balance {
                    font-size: 28rpx;
                    font-family: DreamHanSansSC, DreamHanSansSC;
                    font-weight: normal;
                    color: #99968F;
                    line-height: 38rpx;
                    margin-left: 12rpx;
                }
            }

            .upgradeLaborUnion_content_center_two {
                display: flex;
                flex-direction: column;
                align-items: center;

                image {
                    width: 310rpx;
                    height: 310rpx;
                    margin-top: 84rpx;
                }

                .grade {
                    font-size: 41rpx;
                    font-family: DreamHanSansSC, DreamHanSansSC;
                    font-weight: 800;
                    color: #5A564D;
                    margin-top: 22rpx;
                }

                .condition {
                    font-size: 36rpx;
                    font-family: DreamHanSansSC, DreamHanSansSC;
                    font-weight: normal;
                    color: #5A564D;
                    margin-top: 26rpx;
                }
            }

            .upgradeLaborUnion_content_center_three {
                display: flex;
                justify-content: center;

                .upgradeLaborUnion_content_center_three_input {
                    width: 661rpx;
                    height: 108rpx;
                    background: #FFFAEF;
                    border-radius: 26rpx;
                    border: 4rpx solid #FF9E3C;
                    display: flex;
                    align-items: center;
                    margin-top: 96rpx;
                }
            }
        }

        .upgradeLaborUnion_content_down {
            display: flex;
            justify-content: center;
            margin-top: 150rpx;
            padding-bottom: 108rpx;

            view {
                width: 661rpx;
                height: 108rpx;
                background: linear-gradient(90deg, #FF6B00 0%, #FFAD4C 100%);
                border-radius: 38rpx;
                display: flex;
                justify-content: center;
                align-items: center;

                text {
                    font-size: 38rpx;
                    font-family: DreamHanSansSC, DreamHanSansSC;
                    font-weight: 600;
                    color: #FFFFFF;
                }
            }
        }
    }

    .condition_box {
        width: 750rpx;
        height: 732rpx;
        background: #FFFAEF;
        border-radius: 45rpx 45rpx 0rpx 0rpx;
        display: flex;
        flex-direction: column;
        align-items: center;

        .condition_box_top {

            margin-top: 92rpx;

            .goldBean {
                width: 244rpx;
                height: 182rpx;
            }

            .allianceLeader {
                width: 328rpx;
                height: 186rpx;
            }

            image {
                width: 100%;
                height: 100%;
            }
        }

        .condition_box_center {
            // width: 431rpx;
            height: 96rpx;
            display: flex;
            justify-content: center;
            flex-direction: column;
            margin-top: 44rpx;

            text {
                font-size: 41rpx;
                font-family: DreamHanSansSC, DreamHanSansSC;
                font-weight: 600;
                color: #5A564D;
                line-height: 48rpx;
                text-align: center;
            }

            .errorHign {
                font-size: 28rpx;
                font-family: DreamHanSansSC, DreamHanSansSC;
                font-weight: normal;
                color: #5A564D;
            }
        }

        .condition_box_down {
            display: flex;
            justify-content: center;
            margin-top: 100rpx;

            view {
                width: 661rpx;
                height: 108rpx;
                background: linear-gradient(90deg, #FF6B00 0%, #FFAD4C 100%);
                border-radius: 38rpx;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            text {
                font-size: 38rpx;
                font-family: DreamHanSansSC, DreamHanSansSC;
                font-weight: normal;
                color: #FFFFFF;
            }
        }
    }
}
</style>